<script setup>
  import { listCommon } from '@/api/phone'
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const gotoURL = url => {
    router.push(url)
  }
  const common = ref([])
  const getCommon = async () => {
    const res = await listCommon()
    common.value = res.rows
  }
  getCommon()
  const gotoFullscreen = () => {
    router.push({
      path: '/iframe',
      query: { url: common.value[2]?.content }
    })
  }
</script>

<template>
  <head-title title="天台茶旅" :showBack="false"></head-title>
  <div class="body">
    <img src="/src/assets/img/home/background.png" class="background" />
    <div class="nav-box">
      <div class="nav" @click="gotoURL('/pick')">
        <img src="/src/assets/img/home/1.png" />
        <p>采茶去</p>
      </div>
      <div class="nav" @click="gotoURL('/make')">
        <img src="/src/assets/img/home/2.png" />
        <p>做茶去</p>
      </div>
      <div class="nav" @click="gotoURL('/drink')">
        <img src="/src/assets/img/home/3.png" />
        <p>喝茶去</p>
      </div>
      <div class="nav" @click="gotoURL('/homestay')">
        <img src="/src/assets/img/home/4.png" />
        <p>茶民宿</p>
      </div>
      <div class="nav" @click="gotoURL('/library')">
        <img src="/src/assets/img/home/5.png" />
        <p>茶博物馆</p>
      </div>
      <div class="nav" @click="gotoURL('/recommand')">
        <img src="/src/assets/img/home/6.png" />
        <p>景点推荐</p>
      </div>
    </div>
    <div class="title">天台茶旅线路</div>
    <div class="map" v-if="common[0]?.content">
      <img v-cover="common[0]?.content" />
    </div>
    <div class="video" v-html="common[1]?.content"></div>
    <div class="fullscreen" @click="gotoFullscreen">全景</div>
  </div>
</template>

<style lang="scss" scoped>
  .fullscreen {
    height: 50px;
    background: linear-gradient(151deg, #8dec82 0%, #4ad26f 100%);
    border-radius: 8px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    margin-top: 23px;
  }

  .video {
    margin-top: 20px;
  }

  .map {
    margin-top: 14px;
    height: 178px;
  }

  .background {
    height: 203px;
    position: absolute;
    z-index: -1;
    object-fit: fill;
  }

  .nav-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    margin-top: 16px;
    padding: 10px;

    .nav {
      width: 76px;
      height: 101px;
      margin-bottom: 12px;
      place-self: center;

      img {
        width: 76px;
        height: 76px;
      }

      p {
        height: 23px;
        font-family: SourceHanSerifCN, SourceHanSerifCN;
        font-weight: 500;
        font-size: 16px;
        color: #314b06;
        line-height: 23px;
        text-align: center;
        font-style: normal;
      }
    }
  }

  .body {
    padding: 10px;
  }

  .title {
    height: 26px;
    font-family: SourceHanSerifCN, SourceHanSerifCN;
    font-weight: 600;
    font-size: 18px;
    color: #5c3f2e;
    line-height: 26px;
    text-align: left;
    font-style: normal;
    padding-left: 20px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      width: 5px;
      height: 17px;
      background: #5c3f2e;
      border-radius: 3px;
      left: 0;
      top: 5px;
    }
  }

  .sun {
    &::after {
      content: '';
      width: 22px;
      position: absolute;
      top: -3px;
      height: 22px;
      background: linear-gradient(180deg, #eb9e4d 0%, #ffffff 100%);
      border-radius: 50%;
      left: 75px;
      z-index: -1;
    }
  }

  @media screen and (min-width: 600px) {
    .nav-box {
      display: flex;
    }
  }
</style>
